<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<title>ajax-klxin</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		li {
			list-style: none;
		}

		.wrap {
			width: 846px;
			margin-right: auto;
			margin-left: auto;
		}

		.pagenation {
			overflow: hidden;
		}

		.pagenation li {
			float: left;
			padding: 2px 10px;
			margin: 10px;
			border: 1px solid #d8d8d8;
			cursor: pointer;
			border-radius: 3px;
			transition: 0.6s;
		}

		.pagenation li:hover,
		li.active {
			border-color: #00b90d;
			color: #00b90d;
		}

		.clearfix:after {
			content: '.';
			font-size: 0;
			overflow: hidden;
			display: block;
			clear: both;
		}

		.list li {
			width: 240px;
			border: 1px solid transparent;
			padding: 10px;
			float: left;
			margin: 10px;
			box-shadow: 0 0 10px #e2e2e2;
			transition: 0.6s;
		}

		.list li:hover {
			box-shadow: 0 0 50px #e2e2e2;
		}

		.list li a {
			font-size: 0;
			display: block;
			height: 160px;
			overflow: hidden;
		}

		.list li a img {
			width: 100%;
			vertical-align: middle;
		}

		.list li p {
			color: #929292;
			line-height: 24px;
		}

		.list li p:nth-of-type(1) {
			margin-top: 10px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.list li p:nth-of-type(2) {
			font-size: 14px;
			height: 48px;
			margin-top: 10px;
			-webkit-line-clamp: 2;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
			word-break: break-all;
		}

		.mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(255, 255, 255, 0.3);
			display: none;
		}

		.loading {
			margin: 150px auto;
			border-radius: 50%;
			width: 50px;
			height: 50px;
			border: 10px solid #fff;
			border-top-color: #000;
			animation: loading 1.1s infinite linear;
		}

		@keyframes loading {
			from {
				transform: rotate(0deg);
			}

			to {
				transform: rotate(360deg);
			}
		}
	</style>
</head>

<body>
	<div class="wrap">
		<ol class="pagenation">
			<li data-page="1">1</li>
			<li data-page="2">2</li>
			<li data-page="3">3</li>
			<li data-page="4">4</li>
		</ol>
		<ul class="list clearfix" id="list-data">
		</ul>
	</div>
	<div class="mask">
		<div class="loading"></div>
	</div>
	<!-- 模板引擎 -->
	<script type="text/html" id="list-tpl">
		<% for (var i = 0; i < data.length; i++) { %>
			<li>
				<a href="photo.sina.cn/album_1_86058_468579.htm?cre=picw&amp;mod=picg&amp;loc=31&amp;r=0&amp;rfunc=100&amp;tj=none&amp;vt=4&amp;from=recommend">
				  <img src="<%= data[i].img_url %>" alt="2020年7月14日，江西鄱阳。为。" />
				</a>
				<p><%= data[i].short_name %></p>
				<p><%= data[i].short_intro %></p>
			</li>
		<% } %>	
	</script>
	<script src="js/jquery.min.js"></script>
	<script src="js/template-web.js"></script>
	<script>
		$(function () {
			var page = new URLSearchParams(location.search).get('page') || 1;
			Higtlight(page)
			initListData(page)

			// 回退监听
			window.addEventListener('popstate',(event) => {
				var page = new URLSearchParams(location.search).get('page') || 1;
				Higtlight(page)
				initListData(page)
			})

			$('.pagenation li').on('click', function () {
				var index = $(this).attr('data-page')
				// 考虑兼容性
				if ('pushState' in history) {
					history.pushState(null, 'title', location.href.split('?')[0] + '?page=' + index)
					$(this).addClass('active').siblings('li').removeClass('active')
				} else {
					location.search = '?page=' + index
				}
				initListData(index)
			})
		})
		// 发请求，并渲染到页面中
		function initListData(page) {
			$.ajax({
				url: `https://photo.sina.cn/aj/index?page=${page}&cate=recommend`,
				dataType: 'jsonp',
				beforeSend: function () {
					$('.mask').show()
				},
				success: function (data) {
					var listStr = template('list-tpl', data)
					$('#list-data').html(listStr)
				},
				complete: function () {
					$('.mask').hide()
				}
			})
		}
		// 点击高亮事件
		function Higtlight(page) {
			$('.pagenation li').each(function () {
				if ($(this).attr('data-page') == page) {
					$(this).addClass('active').siblings('li').removeClass('active')
				}
			})
		}

	</script>
</body>

</html>